<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nav2</title>
	<style>
		ul{padding: 0;margin: 0;}
		nav ul.menu{
			height: 40px;
		}
		.menu>li{
			float: left;
			position: relative;
		}
		.menu2 li,.menu>li{
			list-style: none;
		}
		.menu2{
			position: absolute;
			top: 40px;
			left: 0;
			opacity: 0;
			transition: opacity,1s;
			-webkit-transition: opacity,1s;
			-moz-transition: opacity,1s;
			-ms-transition: opacity,1s;
		}
		.menu2 li{height: 0;overflow: hidden;border-bottom: 1px solid #35363a;transition: height,.7s;-webkit-transition: height,.7s;-moz-transition: height,.7s;-ms-transition: height,.7s;}
		.menu2 li:last-child{border-bottom: none;}
		.menu2 li:last-child a{border-radius: 0 0 8px 8px;}
		.menu li:hover .menu2{opacity: 1;}
		.menu li:hover .menu2 li{height: 40px;}
		.menu .menu2 li a{background-image: none;background-color: #1f2024;}
		.menu>li a{
			display: block;
			text-decoration: none;
			color: #fff;
			padding: 0 13px;
			line-height: 40px;
			font-family: arial;
			font-weight: bold;
			text-shadow: 1px 1px 1px #2e2916;
			border-right: 1px solid #383b44;
			background-image: linear-gradient(top,#4c4c54,#2d2d35);
			background-image: -webkit-linear-gradient(top,#4c4c54,#2d2d35);
			background-image: -moz-linear-gradient(top,#4c4c54,#2d2d35);
			background-image: -ms-linear-gradient(top,#4c4c54,#2d2d35);
			background-image: -o-linear-gradient(top,#4c4c54,#2d2d35);
			transition: color,1s;
			-webkit-transition: color,1s;
			-moz-transition: color,1s;
			-ms-transition: color,1s;
		}
		.menu li:hover>a{color: #76c643;}
		.menu>li:first-child a{
			border-radius: 8px 0 0 8px;
		}
		.menu>li:last-child a{
			border-radius: 0 8px 8px 0;
		}
	</style>
</head>
<body>
	<nav>
		<ul class="menu">
			<li><a href="#">Mydashboard</a></li>
			<li><a href="#">Likes</a></li>
			<li><a href="#">Views</a>
				<ul class="menu2">
					<li><a href="#">Documents</a></li>
					<li><a href="#">Messages</a></li>
					<li><a href="#">Sign up</a></li>
				</ul>
			</li>
			<li><a href="#">Uploads</a></li>
			<li><a href="#">Videos</a></li>
			<li><a href="#">Documents</a></li>
		</ul>	
	</nav>
</body>
</html>